<template>
	<view class="app app-bg">
		<view class="base_info">
			<view class="middle">
				<u-avatar size="108" :src="userInfo.avatar || src"></u-avatar>
				<view
					v-if="isLogin"
					class="info"
					@tap="vk.navigateTo('/pages/user/setting/info')"
				>
					<text class="text">{{ vk.getVuex("$user.userInfo.nickname") }}</text>
					<text>{{ vk.getVuex("$user.userInfo.mobile") }}</text>
				</view>
				<view v-else class="info" @tap="login">
					<text>点击登录</text>
				</view>
				<view class="bell">
					<u-icon
						color="#fff"
						name="chat"
						size="48"
						@tap="vk.navigateTo('/pages/notice/list')"
					></u-icon>
					<u-badge type="error" v-if="read" is-dot :offset="[6, 0]"></u-badge>
				</view>
			</view>
			<view class="end">
				<view class="item line" @tap="vk.navigateTo('/pages/user/wallet/list')">
					<text class="text">{{ balance }}</text>
					<text>钱包</text>
				</view>
				<view class="item line" @tap="vk.navigateTo('/pages/user/coupon/list')">
					<text class="text">{{ userInfo.coupon || "0" }}</text>
					<text>优惠券</text>
				</view>
				<view class="item" @tap="vk.navigateTo('/pages/user/collect/collect')">
					<text class="text">{{ userInfo.collect || "0" }}</text>
					<text>收藏</text>
				</view>
			</view>
		</view>
		<view class="other_link">
			<image
				src="https://mp-d0bdc000-db91-44a8-852b-e6f607a7ca19.cdn.bspapp.com/img_my_yqhy.png"
				style="flex: 1; height: 168rpx; margin-right: 10rpx"
				@tap="vk.navigateTo('/pages/salesman/index')"
			></image>
			<image
				src="https://mp-d0bdc000-db91-44a8-852b-e6f607a7ca19.cdn.bspapp.com/cloudstorage/c470c835-d711-41a4-bea8-92bdce91f4dc.png"
				style="flex: 1; height: 168rpx; margin-left: 10rpx"
				@tap="intoShifu"
			></image>
		</view>
		<view class="jump_list">
			<view class="item" v-for="item in jumpList" :key="item.name" @tap="jumpTo(item)">
				<u-image width="60" height="60" :src="item.icon"></u-image>
				<text class="text">{{ item.name }}</text>
				<u-icon size="30" name="arrow-right"></u-icon>
			</view>
		</view>
		<view class="btn" v-if="isLogin" @tap="show = true">退出登录</view>
		<u-modal
			content="确认退出登录么？"
			show-cancel-button
			v-model="show"
			@confirm="logout"
		></u-modal>
		<u-action-sheet :list="list2" v-model="show2"></u-action-sheet>
	</view>
</template>

<script>
let systemInfo = uni.getSystemInfoSync()
var vk = uni.vk

export default {
	data() {
		return {
			// 状态栏高度
			statusBarHeight: systemInfo.statusBarHeight,
			// 用户信息
			src: require("@/static/mine/icon_tx.png"),
			userInfo: { coupon: 0, collect: 0 },
			// 跳转列表
			jumpList: [
				{
					name: "领券中心",
					icon: require("@/static/mine/icon_my_list_suggest.png"),
					url: "/pages/coupon/list"
				},
				{
					name: "常用地址",
					icon: require("@/static/mine/icon_my_list_location.png"),
					url: "/pages/user/address/list"
				},
				{
					name: "关于我们",
					icon: require("@/static/mine/icon_my_list_about.png"),
					url: "/pages/login/agreement?type=GYWM"
				},
				{
					name: "隐私政策",
					icon: require("@/static/mine/icon_my_list_about.png"),
					url: "/pages/login/agreement?type=YSZC"
				},
				{
					name: "意见反馈",
					icon: require("@/static/mine/icon_my_list_suggest.png"),
					url: "/pages/user/setting/feedback"
				},
				{
					name: "联系客服",
					icon: require("@/static/mine/icon-8.png"),
					url: "contact"
				},
				{
					name: "设置",
					icon: require("@/static/mine/icon_my_list_set.png"),
					url: "/pages/user/setting/account-security"
				}
			],
			list2: [{ text: "联系客服：", fontSize: 28 }],

			show: false,
			show2: false,
			isLogin: false,
			read: false
		}
	},
	onLoad() {
		uni.$on("clearRead", () => {
			this.read = false
		})
	},
	onShow() {
		this.isLogin = vk.checkToken()
		if (this.isLogin) {
			this.getUserInfo()
		}
	},
	computed: {
		balance() {
			let a = vk.getVuex("$user.userInfo.account_balance.balance")
			return vk.pubfn.priceFilter(a) || "--"
		}
	},
	methods: {
		// 获取用户信息
		async getUserInfo() {
			const res = await vk.callFunction({
				url: "client/user.getUserCenter",
				loading: true
			})
			this.list2[0].text = "联系客服：" + res.phone
			if (res.code !== 0 || res.flag) {
				return this.clear()
			}
			this.userInfo = {
				coupon: res.couponNum,
				collect: res.collectNum,
				mobile: res.userInfo.mobile
			}
			let arr = vk.getStorageSync(`${res.userInfo._id}read`) || []
			this.read = res.read.length > arr.length
		},
		// 点击登录
		login() {
			let { login } = vk.getConfig()
			vk.navigateTo(`${login.url}`)
			vk.setStorageSync("fresh", 1)
		},
		// 退出登录
		logout() {
			vk.userCenter.logout({
				success: () => {
					let { login } = vk.getConfig()
					vk.navigateTo(`${login.url}?change=true`)
					this.clear()
				}
			})
		},
		clear() {
			this.userInfo = { coupon: 0, blance: 0, avatar: "", nickname: "", mobile: "" }
			this.isLogin = false
			vk.setStorageSync("fresh", 1)
		},
		// 跳转
		jumpTo(item) {
			if (item.url == "contact") {
				this.show2 = true
				return
			}
			vk.navigateTo(item.url)
		},
		// 成为技师
		intoShifu() {
			if (!this.isLogin) {
				return this.login()
			}
			if (!vk.getVuex('$user.userInfo.mobile')) {
				return vk.toast("未绑定手机号，请前往绑定", "none", 1300, () => {
					vk.navigateTo("/pages/user/setting/update-mobile?pageIndex=1")
				})
			}
			vk.navigateTo("/pages/user/move-reid/shifu")
		}
	}
}
</script>

<style lang="scss" scoped>
.app {
	min-height: 100vh;
	background: linear-gradient(135deg, #eafff8 0%, #e7fcff 100%) no-repeat;
}
.app::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 328rpx;
	background: url("@/static/mine/img_my_nav_bg.png");
	background-size: 100% 328rpx;
	z-index: 1;
}
.base_info,
.other_link,
.jump_list,
.btn {
	position: relative;
	z-index: 2;
}

.base_info {
	width: 100%;
	min-height: 388rpx;
	padding-top: 20rpx;
	.top {
		font-weight: 700;
		font-size: 32rpx;
		text-align: center;
		color: #ffffff;
		padding: 10rpx 20rpx;
		position: relative;
		display: flex;
		align-items: center;
		.title {
			flex: 1;
		}
		.bell {
			position: relative;
		}
	}
	.middle {
		padding: 46rpx 0 36rpx 30rpx;
		display: flex;
		align-items: center;
		.info {
			display: flex;
			flex-direction: column;
			font-size: 26rpx;
			color: #fbfbfb;
			padding-left: 24rpx;
			flex: 1;
			.text {
				font-size: 32rpx;
				margin-bottom: 6rpx;
				font-weight: bold;
			}
		}
		.update_btn {
			font-size: 26rpx;
			display: flex;
			align-items: baseline;
			padding: 10rpx 16rpx 10rpx 24rpx;
			background-color: #fff;
			border-radius: 32rpx 0 0 32rpx;
			.u-icon {
				margin-right: 8rpx;
			}
		}
		.bell {
			position: relative;
			margin-right: 26rpx;
		}
	}

	.end {
		margin: 4rpx 20rpx;
		background: #ffffff;
		box-shadow: 0 3rpx 26rpx 1rpx rgba(0, 0, 0, 0.02);
		border-radius: 12rpx;
		padding: 31rpx 0;
		display: flex;
		justify-content: space-around;
		.item {
			flex: 1;
			text-align: center;
			display: flex;
			flex-direction: column;
			align-items: center;
			font-size: 24rpx;
			position: relative;
			.text {
				margin-bottom: 10rpx;
				font-size: 36rpx;
				font-weight: bold;
			}
		}
		.line::after {
			content: "";
			position: absolute;
			right: 0;
			top: 50%;
			transform: translateY(-50%);
			width: 1rpx;
			height: 60rpx;
			background-color: #d1d1d1;
		}
	}
}

.other_link {
	display: flex;
	justify-content: space-between;
	padding: 0 20rpx 26rpx;
	.u-image {
		box-shadow: 0 3rpx 26rpx 1rpx rgba(0, 0, 0, 0.02);
	}
}

.jump_list {
	background: #ffffff;
	border-radius: 12rpx;
	padding: 22rpx;
	margin: 0 20rpx;
	.item {
		font-size: 32rpx;
		display: flex;
		align-items: center;
		padding: 20rpx 0;
		.text {
			flex: 1;
			padding-left: 16rpx;
			transform: translateY(-2rpx);
		}
	}
}

.btn {
	height: 88rpx;
	background: #24c388;
	border-radius: 12rpx;
	color: #ffffff;
	font-size: 30rpx;
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 50rpx 20rpx 0;
}
</style>
